<template>
<!--start.wxml-->
<view class="container">
  <block>
    <view class="content">
      <view class="hd" style="transform:rotateZ(0deg);">
        <image class="logo" src="../../static/images/more/logo.png"></image>
      </view>
	  <view style="display: flex; flex-direction: row;justify-content: center; margin-top: 20px;">
		张业頔的杂货铺
	  </view>
      <view class="bd">
        <view class="confirm-btn" bindtap='goToIndex' >
          <text>走，逛逛去</text>
        </view>
        <text class="copyright">@东少d张业頔</text>
      </view>
    </view>
  </block>
</view>
</template>
<script>
	
	export default {
	
	}
</script>

<style>
	/**start.wxss**/
	page{
	  font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
	  font-size: 10pt;
	  line-height: 150%;
	  min-height: 100%;
	  position: relative;
	  display: flex;
	  flex-direction: column;
	  align-items: stretch;
	}
	.container {
	  position: relative;
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  /* background: #C09D34 */
	  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
	  align-items: stretch;
	  padding: 0;
	  height: 100%;
	  overflow: hidden;
	  justify-content: space-between;
	  box-sizing: border-box;
	} 
	.content{
	  flex: 1;
	  display: flex;
	  position: relative;
	  z-index: 10;
	  flex-direction: column;
	  align-items: stretch;
	  justify-content: center;
	  width: 100%;
	  height: 100%;
	  padding-bottom: 450rpx;
	  /* background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); */
	  /* background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0)), color-stop(0.1, #f4f4f4), to(#f4f4f4)); */
	  opacity: 0;
	  transform: translate3d(0,100%,0);
	  animation: rise 3s cubic-bezier(0.19, 1, 0.22, 1) .25s forwards;
	}
	
	.remind-box {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding-bottom: 300rpx;
	}
	.remind-img {
	  width: 250rpx;
	  height: 250rpx;
	  padding-bottom: 25rpx;
	}
	
	@keyframes rise{
	  0% {opacity: 0;transform: translate3d(0,100%,0);}
	  50% {opacity: 1;}
	  100% {opacity: 1;transform: translate3d(0,450rpx,0);}
	}
	.title{
	  position: absolute;
	  top: 30rpx;
	  left: 50%;
	  width: 600rpx;
	  height: 200rpx;
	  margin-left: -300rpx;
	  opacity: 0;
	  animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards;
	}
	
	.smalltitle{
	  position: absolute;
	  top: 50rpx;
	  left: 50%;
	  width: 600rpx;
	  height: 200rpx;
	  margin-left: -300rpx;
	  opacity: 0;
	  animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards;
	}
	
	@keyframes show{
	  0% {opacity: 0;}
	  100% {opacity: .95;}
	}
	
	.hd {
	  position: absolute;
	  top: 0;
	  left: 50%;
	  width: 1000rpx;
	  margin-left: -500rpx;
	  height: 200rpx;
	  transition: all .35s ease;
	}
	.logo {
	  position: absolute;
	  z-index: 2;
	  left: 50%;
	  bottom: 200rpx;
	  width: 160rpx;
	  height: 160rpx;
	  margin-left: -80rpx;
	  border-radius: 160rpx;
	  animation: sway 10s ease-in-out infinite;
	  opacity: .95;
	}
	@keyframes sway{
	  0% {transform: translate3d(0,20rpx,0) rotate(-15deg); }
	  17% {transform: translate3d(0,0rpx,0) rotate(25deg); }
	  34% {transform: translate3d(0,-20rpx,0) rotate(-20deg); }
	  50% {transform: translate3d(0,-10rpx,0) rotate(15deg); }
	  67% {transform: translate3d(0,10rpx,0) rotate(-25deg); }
	  84% {transform: translate3d(0,15rpx,0) rotate(15deg); }
	  100% {transform: translate3d(0,20rpx,0) rotate(-15deg); }
	}
	.wave {
	  position: absolute;
	  z-index: 3;
	  right: 0;
	  bottom: 0;
	  opacity: 0.725;
	  height: 260rpx;
	  width: 2250rpx;
	  animation: wave 10s linear infinite;
	}
	.wave-bg {
	  z-index: 1;
	  animation: wave-bg 10.25s linear infinite;
	}
	@keyframes wave{
	  from {transform: translate3d(125rpx,0,0);}
	  to {transform: translate3d(1125rpx,0,0);}
	}
	@keyframes wave-bg{
	  from {transform: translate3d(375rpx,0,0);}
	  to {transform: translate3d(1375rpx,0,0);}
	}
	
	.bd {
	  position: relative;
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  align-items: stretch;
	  animation: bd-rise 2s cubic-bezier(0.23,1,0.32,1) .75s forwards;
	  opacity: 0;
	}
	@keyframes bd-rise{
	  from {opacity: 0; transform: translate3d(0,60rpx,0); }
	  to {opacity: 1; transform: translate3d(0,0,0); }
	}
	
	.confirm-btn {
	  font-size: 13pt;
	  line-height: 85rpx;
	  height: 85rpx;
	  /* background: #C09D34; */
	  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
	  color: #fff;
	  text-align: center;
	  border-radius: 100rpx;
	  margin: 40% 20%;
	}
	.confirm-btn:active {
	  opacity: .8;
	}
	
	
	.copyright {
	  font-size: 28rpx;
	  color: #999;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  padding: 30rpx;
	  text-align: center;
	}
</style>
